// Flex布局混入
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

// 文本截断
@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin multi-line-truncate($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 阴影效果
@mixin box-shadow($level: 1) {
  @if $level ==1 {
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  }

  @else if $level ==2 {
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  }

  @else if $level ==3 {
    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
  }
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 响应式字体大小
@mixin responsive-font($min-size: 24, $max-size: 32, $min-width: 320, $max-width: 750) {
  font-size: #{$min-size}rpx;

  @media screen and (min-width: #{$min-width}px) {
    font-size: calc(#{$min-size}rpx + (#{$max-size} - #{$min-size}) * ((100vw - #{$min-width}px) / (#{$max-width} - #{$min-width})));
  }

  @media screen and (min-width: #{$max-width}px) {
    font-size: #{$max-size}rpx;
  }
}

// 按钮重置
@mixin button-reset {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  outline: none;
}

// 适配刘海屏安全区域
@mixin safe-area-padding($position: bottom) {
  padding-#{$position}: constant(safe-area-inset-#{$position});
  padding-#{$position}: env(safe-area-inset-#{$position});
}

// 文字某一行显示省略号
@mixin text-ellipsis($lines: 1) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
